import TableList from '@/pages/CommodityManagement/CommodityAttributes';
import { Button, Result, Descriptions, Statistic, Divider, message } from 'antd';
import React, { useState } from 'react';
import { connect } from 'umi';
import { uploadCommodityStep, uploadField } from '../../service';
import styles from './index.less';

const Step3 = (props) => {
  const { data, dispatch, handleCurrent, handleAttr, CommodityId, reviseState } = props;
  const [selectAttr, setSelectAttr] = useState([]);
  if (!data) {
    return null;
  }
  const onFinish = () => {
    handleAttr(selectAttr);
    selectAttr.map((item) => {
      reviseState ? null : delete item.id;
    });
    handleCurrent(3);
  };
  const handleBack = () => {
    handleCurrent(1);
  };
  const handleAttributes = (payload) => {
    setSelectAttr(payload);
  };
  return (
    <div className={styles.attributes_div}>
      <TableList handleOnchange={handleAttributes} id={CommodityId} />
      <div className={styles.bottom_btn}>
        <Button onClick={handleBack}>上一步</Button>
        <Divider type="vertical" />
        <Button type="primary" onClick={onFinish}>
          下一步
        </Button>
      </div>
    </div>
  );
};

export default connect(({ commodityManagementAndCommodityCreatingSteps }) => ({
  data: commodityManagementAndCommodityCreatingSteps.step,
}))(Step3);
